<template>
<div>
	<!--查询部分-->
	<el-row :gutter="24">
		<el-col :span="2" style="">
			<p class="queryLabel">单位:</p>
		</el-col>
		<el-col :span="3">
			<el-input placeholder="请选择单位" size="small" icon="more" v-model="companyLabel" :on-icon-click="openDeptTree"></el-input>
		</el-col>
		
		<el-col :span="2">
			<p class="queryLabel">日期：</p>
		</el-col>
		<el-col :span="3">
			<el-date-picker v-model="data.dateStart" size="small" style="width:100%;" type="date" clearable placeholder="起始日期">
			</el-date-picker>
		</el-col>
		<el-col :span="1" style="">
			<p class="queryLabel">至:</p>
		</el-col>
		<el-col :span="3">
			<el-date-picker v-model="data.dateEnd" size="small" style="width:100%;" type="date" clearable placeholder="结束日期">
			</el-date-picker>
		</el-col>
		<el-col :span="3" style="text-align: right;">
				<el-button type="primary" size="small" @click="query">查询</el-button>
				<el-button type="primary" size="small" @click="downloadDaily">导出</el-button>
		</el-col>
	</el-row>
	<!--表格部分-->
	<el-table :data="receiveData" border="" show-summary stripe sum-text="汇总" style="width:100%" :row-class-name="tableRowClassNames">
		<el-table-column prop="QueryDate" label="日期" width="180" sortable></el-table-column>
		<el-table-column prop="carSeries" label="车系" width="180"></el-table-column>
		<el-table-column label="财务" style="text-align: center;">
			<el-table-column prop="FinanceIn" label="入库" width="120"></el-table-column>
			<el-table-column prop="costIn" label="入库金额" width="120"></el-table-column>
			<el-table-column prop="FinanceOut" label="出库" width="120"></el-table-column>
			<el-table-column prop="costOut" label="出库金额" width="120"></el-table-column>
			<el-table-column prop="FinanceStock" label="库存" width="120"></el-table-column>
			<el-table-column prop="costStock" label="库存金额" width="120"></el-table-column>
		</el-table-column>
		<el-table-column label="仓储" style="text-align: center;">
			<el-table-column prop="CarIn" label="入库" width="120"></el-table-column>
			<el-table-column prop="CarOut" label="出库" width="120"></el-table-column>
			<el-table-column prop="CarStock" label="库存" width="120"></el-table-column>
		</el-table-column>
	</el-table>
	<!--分页-->
	<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="total">
	</el-pagination>
	<!--引用单位选择模块-->
	<company :show="showCompany" v-if="showCompany" v-on:close="showCompany=false" v-on:insert="inserts"></company>
</div>
</template>
<script>
	import moment from 'moment'
	import company from '../../insPlugins/company.vue' //单位选择模块
	export default {
		data: function() {
			return {
				//每页的数量
				page: this.page,
				//页码数
				CurentPage: 1,
				//单位ID
				companyId:[],
				//单位名称
				companyLabel:"",
				//单位选择Dialog
				showCompany:false,
				//查询条件数据集
				data:{
					companyId:[],	// 公司ID
					dateStart:"",	// 起始时间
					dateEnd:"",		// 结束时间
				},
				//查询结果接收数据集
				receiveData:[
				],
				total:0,
			}
		},
		computed: {
		},
		methods:{
			//单位选择
			openDeptTree:function(){
				this.$data.showCompany = true; // 显示单位选择模块
			},
			//查询按钮
			query:function(){
			
				this.$data.data.companyId  = this.$data.companyId; // 获取单位ID
				this.$data.data.dateStart = this.momentFu(this.$data.data.dateStart); //起始时间格式化
				this.$data.data.dateEnd = this.momentFu(this.$data.data.dateEnd); // 结束时间格式化
				
				this.$http.post(this.API_ROOT + '/scm/count/countByDay', this.$data.data, {
					params: {
						start: this.$data.CurentPage, //页码
						limit: this.$data.page.pageSize, //每页的数量
					}
				}).then((response) => {
					
					debugger;
					if(response.body.success) {
						this.$data.receiveData = response.body.dataList;
						this.$data.total = parseInt(response.body.total); //数据条数（必须强转成int类型，否则不显示）
						debugger;
					} else {
					}
					
					debugger;
					
				}, (response) => {});
				
				debugger;
			},
			//导出按钮
			downloadDaily:function(){
				this.$data.data.dateStart = this.momentFu(this.$data.data.dateStart); //起始时间格式化
				this.$data.data.dateEnd = this.momentFu(this.$data.data.dateEnd); // 结束时间格式化
				window.location.href = this.API_ROOT + '/scm/count/excel/exportDay?uid=' + window.localStorage.getItem("uid") + "&dateStart="+this.$data.data.dateStart+"&dateEnd="+this.$data.data.dateEnd;
			},
			//根据内容改变表格颜色（每天合计）
			tableRowClassNames(row, index) {
				debugger;
				if(row.carSeries == null) {
					return 'dayCount';
				} else {
					return "";
				}
			},
			//单位选择的回调
			inserts: function(val, lable) {

				this.$data.companyId = val;	//单位ID
				this.$data.companyLabel = lable; //单位名称
				
				debugger;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//时间格式化
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
			
			//测试数据
			TestgetData:function(){
				var list = [{
				            "car": "1",
				            "inWarehouse": "1",	
								}];
				var listAdd = {"car": "1",
				            "inWarehouse": "1"};
				for(var i=0;i<26;i++){
					list.push(listAdd);
				}
				
				this.$data.receiveData = list;
				       		 debugger;
			},
	},
	//表单创建时执行
		created: function() {
			//给单位默认值
			this.$data.companyLabel=window.localStorage.getItem("companyName");
			this.$data.companyId[0]=window.localStorage.getItem("companyId");
			this.query();
		},
	components: {
			company
		},
}
</script>

<style>
	.dayCount {
		background: #99CCFF
	}
	
</style>